<template>
  <div class="main">
        <div class="sigma-content">
          <div class="sigma-middle-line">
              <span class="sigma-line-text">最新活动</span>
          </div>
        </div>
        <div class="main_box">
            <div v-if="!downline" @click="clickluckyWheel()">
              <img class="logo" src="../../../../static/img/luckyWheel.jpg" height="40%" width="93%" />
            </div>
            <div v-else>
              <img class="logo" src="../../../../static/img/2.jpg" height="40%" width="93%" />
            </div>          
          <ul class="list_ul">
            <li v-for="(todo,index) in data" :key="todo.id">
              <router-link :to="{path:'/goodDetail', query: {goodsId:todo.merchant?todo.merchant.code:'',title: todo.title}}">
                <div class="list">
                  <div class="image">
                    <img  alt="图片" :src="todo.photo">
                  </div>
                  <div class="li_text">
                    <div class="name">{{todo.title}}</div>
                    <div class="old_price">
                      <span class="nametwo" v-if="todo.old_price">市场价￥{{todo.old_price}}</span>
                    </div>
                    <div class="info">
                      <span class="Price"> 促销价 ￥{{todo.new_price}} </span>
                      <span class="goumai">已有<span class="sales"> {{todo.Sales?todo.Sales:0}}</span> 人购买</span>
                    </div>

                  </div>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
</template>

<script>
import api from "@/fetch/api"
export default {
  name: "HomeContainer",
  data(){
    return {
      data: [],
      downline: true,
      imgurl:"https://ceshi.sailafeinav.com/"
    }
  },
    mounted:function(){
    this.getData();
  },
  methods:{
    getData: function(){
      const params = {
        goodstype: 'all'
      };
      api.apiClassify(params)
        .catch(res => {
          this.print(res);
          this.data = res.data.results
        })
    },
    clickluckyWheel() {
      this.$router.push('/lottery')
    }
  }
}
</script>

<style lang="stylus" scoped>
.logo{
  border-radius:0.6rem;
  margin-left:0.34rem
}
.goumai{
  float:right;
  font-size: .36rem
}
.li_text{
   float:left;
  margin-left: .5rem;
  width :63%;
  font-size:10px;
  line-height:0.66rem;
}
.sigma-content{
    margin: .8rem 1.2rem;
    text-align: center;
    background-color: #fff;
}
.sigma-middle-line:before{
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background-color: #999;
    position: relative;
    top: 10px;
    left: 0;
}
.sigma-line-text{
    display: inline-block;
    background: #fff;
    padding: 0 18px 0 18px;
    position: relative;
    font-size: 14px;
    font-weight: 500;
}

.list {
  height: 2.33rem;
  background: white;
}


.main_box .list_ul {
  overflow: hidden;
  margin-bottom: 1.5rem;
  padding-bottom: 1.4rem;
}

ul li {
  list-style: none;
  padding: 0.3rem 0;
  margin: 0 .3rem;
  margin-top: .3rem;
  background: #fff;
  border-radius: .2rem;
  border: 1px solid #eee;
  overflow: hidden;
}

.old_price{
  height: .8rem;
  line-height: .8rem;
}
.Price {
  font-size: 0.33rem;
  color: #ff555f;
  margin: auto;
  text-align: center;
  font-size: 0.36rem;
}

.name {
  line-height: 0.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: auto;
  font-size: 0.4rem;
  font-weight: 500;
  text-align: left;
  padding-top: .1rem;
}

.nametwo {
  height: 0.48rem;
  font-size: 0.27rem;
  color: #777;
  text-align: center;
   text-decoration:line-through;
}
.sales{
  color: #ff555f;
}
.image {
  background: white;
  float:left;
  width: 28%;
  overflow: hidden;
  margin-left: .1rem;
  img {
    width: 2.6rem;
    height: 2.3rem;

  }
}
</style>
